এইচটিএমএল ডোম জাভাস্ক্রিপ্টের মাধ্যমে এইচটিএমএল এলিমেন্টের কন্টেন্টকে পরিবর্তন করতে সাহায্য করে।

এইচটিএমএল আউটপুট পরিবর্তন

জাভাস্ক্রিপ্ট খুব সহজে একটি ডায়নামিক এইচটিএমএল কন্টেন্ট তৈরি করতে পারেঃ

তারিখঃ Wed Aug 23 2023 03:13:58 GMT+0600 (Bangladesh Standard Time)

জাভাস্ক্রিপ্টে document.write() দ্বারা সরাসরি এইচটিএমএলে আউটপুট নেওয়া যায়ঃ

kt_satt_skill_example_id=1408

তবে ডকুমেন্ট লোড হয়ে যাওয়ার পর document.write() ব্যবহার করা ঠিক নয়। এটি ডকুমেন্টটিকে সম্পূর্ণ পরিবর্তন করে।

এইচটিএমএল কন্টেন্ট পরিবর্তন

একটি এইচটিএমএল এলিমেন্টের কন্টেন্ট পরিবর্তন করার সবচেয়ে সহজ উপায় হলো innerHTML প্রোপার্টি ব্যবহার করা।

এইচটিএমএল এলিমেন্টের কন্টেন্ট পরিবর্তন করার জন্য নিচের এই সিন্টেক্স ব্যবহার করুনঃ

kt_satt_skill_example_id=1409

নিচের উদাহরণে একটি <p> এলিমেন্টের কন্টেন্টকে পরিবর্তন করা হয়েছেঃ

kt_satt_skill_example_id=1412

নিচের উদাহরণে একটি <h3> এলিমেন্টের কন্টেন্টকে পরিবর্তন করা হয়েছেঃ

kt_satt_skill_example_id=1414

উদাহরণের ব্যাখ্যাঃ

• উপরের এইচটিএমএল ডকুমেন্টটিতে id="heading" যুক্ত একটি <h3> এলিমেন্ট আছে
• এইচটিএমএল ডোম ব্যবহার করে id="heading" যুক্ত এলিমেন্টটিকে খুঁজে বের করা হয়েছে
• জাভাস্ক্রিপ্ট ঐ এলিমেন্টের কন্টেন্ট পরিবর্তন করেছে

এট্রিবিউটের ভ্যালু পরিবর্তন

এইচটিএমএল এট্রিবিউটের ভ্যালু পরিবর্তন করার জন্য নিচের সিন্টেক্স ব্যবহার করুনঃ

kt_satt_skill_example_id=1417

নিচের উদাহরণে <a> এলিমেন্টের href এট্রিবিউটের ভ্যালু পরিবর্তন করা হয়েছেঃ

kt_satt_skill_example_id=1418

উদাহরণের ব্যাখ্যাঃ

• উপরের এইচটিএমএল ডকুমেন্টে id="anc1" যুক্ত <a> এলিমেন্ট আছে
• এইচটিএমএল ডোম ব্যবহার করে id="anc1" যুক্ত এলিমেন্টটিকে খুঁজে বের করা হয়েছে
• জাভাস্ক্রিপ্টের মাধ্যমে href এট্রিবিউটের ভ্যালু "../index.php" থেকে "../../index.php" তে পরিবর্তন করা হয়েছে